﻿<!DOCTYPE html>
<html lang="zh-CN">

<!-- faultDetail 故障与限位详情页面 -->

<head>
    <title>故障与限位详情页面</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
        }
        button {
            background-color: orange;
            border-radius: 5px;
            height: 42px;
            line-height: 18px;
            font-size: 18px;
            color: #FFF;
            cursor: pointer;
            box-shadow: 3px 3px 3px black;
            font-weight: bolder;
    }
        .el-table .red {
            background-color: #efc9c9;
        }

        .el-table .green {
            background-color: #caf5ca;
        }

        .el-table--enable-row-hover .el-table__body tr:hover>td {
            background-color: rgba(0, 0, 0, 0) !important;
        }
    </style>

    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./config.js"></script>
    <script src="./js/nept-websocket.js"></script>
    <link rel="stylesheet" href="./css/notiflix-3.2.5.min.css">
    <script src="./js/notiflix-3.2.5.min.js"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./js/element-ui/index.js"></script>
    <link rel="stylesheet" href="./js/element-ui/index.css">
    <script src="./js/layer/layer.js"></script>
    <script src="./js/gojs/go.js"></script>
    <script src="./js/gojs/fault/faultProcess.js"></script>
</head>

<body>
    <div id="app">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="故障详情" name="first">
                <div style=" height: 800px; width: 1583px;background-color: #008000;margin-right: 5px;">
                    <div id="myDiagramDiv" style="width:100%; height:100%; "></div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="故障列表" name="second">
                <div style="margin-left: 18px;width: 97%;float: left;">
                    <div style="float: left;margin-left: 10px;">
                        <div class="block">
                            <el-date-picker v-model="timeVal" type="daterange" range-separator="~"
                                start-placeholder="开始日期" end-placeholder="结束日期" unlink-panels value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </div>
                    </div>
                    <div style="float:left; margin-left: 20px;">
                        <el-button type="primary" @click="qryList">查询</el-button>
                    </div>
                </div>
                <div style="margin: 18px;width: 97%;float: left;">
                    <el-table :data="tableData" stripe style="width: 100%" height="550">
                        <el-table-column prop="SHOW_MSG" label="故障详情" align="center">
                        </el-table-column>
                        <el-table-column prop="ADDTIME" label="出现时间" align="center" :formatter="formatTime">
                        </el-table-column>
                        <el-table-column prop="UPDATETIME" label="消除时间" align="center" :formatter="formatTime">
                        </el-table-column>
                        <el-table-column prop="TAGNAME" label="点名" align="center">
                        </el-table-column>
                    </el-table>

                    <div style="margin: 10px;overflow: hidden">
                        <div style="float: right;">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="currentPage" :page-sizes="page_size_array" :page-size="pageSize"
                                background layout="prev, pager, next,total, sizes" :total="totals">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="事件顺序记录" name="third">
                <div style="margin-left: 18px;width: 97%;float: left;">
                    <div style="float: left;margin-left: 10px;">
                        <div class="block">
                            <el-date-picker v-model="timeVal" type="daterange" range-separator="~"
                                start-placeholder="开始日期" end-placeholder="结束日期" unlink-panels value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </div>
                    </div>
                    <div style="float:left; margin-left: 20px;">
                        <el-button type="primary" @click="qrySOEList('',1)">查询</el-button>
                    </div>
                    <div style="float:left; margin-left: 20px;">
                        <el-button id="btn_real" type="warning" @click="qrySOEList('REAL',1)">查看实时</el-button>
                    </div>
                    <div style="float:left; margin-left: 20px;">
                        <el-button id="btn_his" type="success" @click="qrySOEList('HIS',1)">查看历史</el-button>
                    </div>
                </div>
                <div style="margin: 18px;width: 97%;float: left;">
                    <el-table :data="tableDataSoe" :row-class-name="tableRowClassName" style="width: 100%" height="550">
                        <el-table-column prop="SHOW_MSG" label="消息" align="center">
                        </el-table-column>
                        <el-table-column prop="ADDRESS" label="PLC地址" align="center"></el-table-column>
                        <el-table-column prop="ADDTIME" label="发生时间" align="center" :formatter="formatTime">
                        </el-table-column>
                        <el-table-column prop="UPDATETIME" label="结束时间" align="center" :formatter="formatTime">
                        </el-table-column>
                        <el-table-column prop="DURATION" label="报警持续时间(秒)" align="center"></el-table-column>
                        <el-table-column prop="RUN_MODE" label="控制方式" align="center">
                            <template slot-scope="scope">{{ scope.row.RUN_MODE === '0' ? '司机室' :(scope.row.RUN_MODE==='1'?'远程手动':(scope.row.RUN_MODE==='2'?'自动':'')) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="ALERT_LEVEL" label="报警等级" align="center">
                            <template slot-scope="scope">{{ scope.row.ALERT_LEVEL === 'F' ? '故障' :
                                (scope.row.ALERT_LEVEL===null?'':'LEVEL'+scope.row.ALERT_LEVEL) }}</template>
                        </el-table-column>
                        <el-table-column prop="ALERT_GROUP" label="报警组" align="center"></el-table-column>
                    </el-table>

                    <div style="margin: 10px;overflow: hidden">
                        <div style="float: right;">
                            <el-pagination @size-change="handleSizeChangeSoe" @current-change="handleCurrentChangeSoe"
                                :current-page="currentPageSoe" :page-sizes="page_size_array" :page-size="pageSizeSoe"
                                background layout="prev, pager, next,total, sizes" :total="totalSoes">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </el-tab-pane> -->

            <!-- <el-tab-pane label="故障逻辑" name="name3">
                <div style="margin-left: 18px;width: 97%;float: left;">
                  <div style="float: left;">
                    <button id="dlb_left" style="margin-left: 10px;width: 130px;background-color: #6495ED;">堆料臂左转</button>
                    <button id="dlb_right" style="margin-left: 10px;width: 130px;background-color: #6495ED;">堆料臂右转</button>
                    <button id="qlb_left" style="margin-left: 10px;width: 130px;background-color: #6495ED;">取料臂左转</button>
                    <button id="qlb_right" style="margin-left: 10px;width: 130px;background-color: #6495ED;">取料臂右转</button>
                    <button id="gbj_up" style="margin-left: 10px;width: 130px;background-color: #6495ED;">刮板机上仰</button>
                    <button id="gbj_down" style="margin-left: 10px;width: 130px;background-color: #6495ED;">刮板机下俯</button>
                    <button id="gbj_gbj" style="margin-left: 10px;width: 130px;background-color: #6495ED;">刮板机</button>
                    <button id="dlpd_dlpd" style="margin-left: 10px;width: 130px;background-color: #6495ED;">堆料皮带</button>
                  </div>
                </div>
            </el-tab-pane> -->

            <el-tab-pane label="图表监控" name="echarts">
                <iframe id="chartsIframe" align="center" src="./charts.html"
                 width="100%" height="800px" frameborder="no" border="0"
                    marginwidth="0" marginheight="0" scrolling="auto">
                </iframe>
            </el-tab-pane>
        </el-tabs>
    </div>

    <script>
        // 成员属性
        // ======================================================
        let arrGOJSData = [];
        let arrRed = [];
        let bShowRed = false;
        let g_qryType = '';
        // ======================================================

        // 请求获取故障点信息
        function getErrPointInfo() {
            let requestParam = {
                "cmdType": "GET_ERROR_PAGE_CONFIG",
                "pageID": g_PageID_Fault
            };

            $.ajax({
                async: false,
                data: JSON.stringify(requestParam),
                dataType: "json",
                type: "POST",
                url: g_CenterHttpUrl,

                success: function (data) {
                    if (data.resCode == g_ResCodeSuccess) {
                        // console.log("[faultDetail][getErrPointInfo]success");
                        AddGroupsByJson(data.resMsg.Group);
                        AddNodesByJson(data.resMsg.Node);
                        preRefresh();
                    }
                    else {
                        Notiflix.Notify.warning("获取故障与限位详情数据失败：" + data.resMsg);
                    }
                },

                error: function (rsp) {
                    Notiflix.Notify.failure("获取故障与限位详情数据异常");
                }
            });
        }

        // 页面刷新
        // ======================================================
        // 设置颜色
        function setColor(iKey, strColor) {
            let nodeData = myDiagram.model.findNodeDataForKey(iKey);
            if (nodeData != null) {
                myDiagram.model.setDataProperty(nodeData, 'fill', strColor);
            }
        }

        // 刷新数据
        function refreshViewData(jsData) {
            arrRed = [];
            for (let itemJS of jsData) {
                if (itemJS.C == "green") {
                    // 绿色故障点，正常显示
                    setColor(parseInt(itemJS.I), itemJS.C);
                }
                else {
                    // 红色故障点，缓存起来，在定时函数中刷新（闪烁）
                    arrRed[itemJS.I] = itemJS.C;
                }
            }
        }

        // 预刷新
        function preRefresh() {
            let strData = localStorage.getItem("faultGOJS");
            if (strData != null) {
                refreshViewData(JSON.parse(strData));
            }
        }

        // // 故障点闪烁
        // function FaultNodeFlash() {
        //     for (let item in arrRed) {
        //         setColor(parseInt(item), bShowRed ? arrRed[item] : "grey");
        //     }

        //     bShowRed = !bShowRed;
        // }

        // setInterval(function () {
        //     if ((arrRed != null) && (arrRed.length > 0)) {
        //         FaultNodeFlash();
        //     }
        // }, 350);

        // ======================================================

        // WebSocket相关
        // ======================================================
        function onReceiveFaultPoint(data) {
            if ((data != null) && (data != "")) {
                let jsdata = JSON.parse(data);
                arrGOJSData = jsdata.GOJS;
                refreshViewData(jsdata.GOJS);
            }
        }

        let faultDetailMessage = "pid=" + g_PageID_Fault;
        let faultDetailWS = new NeptWebSocket(
            g_CenterServerIp,
            g_CenterWebSocketPort,
            g_WebSocketMaxReconnectInterval,
            onReceiveFaultPoint,
            faultDetailMessage
        );
        faultDetailWS.tryCreate();

        // 全局事件响应
        // ==========================================================
        // 加载
        window.onload = function () {
            try {
                Notiflix.Notify.init({timeout: g_NotiflixTimeout});
                let Component = Vue.extend(Main);
                new Component().$mount('#app');
                InitGOJS();
                getErrPointInfo();
            }
            catch (ex) {
                faultDetailWS.close();
            }
        };

        let Main = {
            data() {
                return {
                    activeName: 'first',
                    deviceList: [{
                        value: '',
                        label: '全部'
                    },
                    {
                        value: '2',
                        label: '堆料臂'
                    },
                    {
                        value: '3',
                        label: '取料臂'
                    },
                    {
                        value: '4',
                        label: '刮板机'
                    },
                    {
                        value: '5',
                        label: '堆料皮带'
                    },
                    {
                        value: '6',
                        label: '超声波'
                    },
                    {
                        value: '6',
                        label: '其他'
                    }],
                    deviceListSelect: '全部',
                    timeVal: '',
                    tableData: [],
                    tableDataSoe: [],
                    currentPage: 1,
                    currentPageSoe: 1,
                    totals: 0, // 数据行数
                    totalSoes:0,
                    page_size_array: [10, 20, 30, 40, 60, 100],
                    pageSize: 10, // 每页显示条数
                    pageSizeSoe: 10
                }
            },
            methods: {
                tableRowClassName({ row }) {
                    if (row.ALERT_LEVEL === 'F') {
                        return 'red';
                    } else {
                        return 'green';
                    }
                },
                handleClick(tab, event) {

                },
                handleSizeChange(val) {
                    this.pageSize = val;
                    this.getList();
                },
                handleSizeChangeSoe(val) {
                    this.pageSizeSoe = val;
                    this.qrySOEList(g_qryType);
                },
                handleCurrentChange(val) {
                    this.currentPage = val;
                    this.getList();
                },
                handleCurrentChangeSoe(val) {
                    this.currentPageSoe = val;
                    this.qrySOEList(g_qryType);
                },
                getTimes() {
                    let now = new Date();
                    let time1 = now.getFullYear() + "-" + ((now.getMonth() + 1) < 10 ? "0" : "") + (now.getMonth() + 1) + "-" + (now.getDate() < 10 ? "0" : "") + now.getDate();
                    let time2 = new Date(getNextDay(now));
                    time2 = time2.getFullYear() + "-" + ((time2.getMonth() + 1) < 10 ? "0" : "") + (time2.getMonth() + 1) + "-" + (time2.getDate() < 10 ? "0" : "") + time2.getDate();
                    this.timeVal = [time1, time2];
                },
                qryList() {
                    this.currentPage = 1;
                    this.getList();
                },
                qrySOEList(qryType, pageIndex) {
                    g_qryType = qryType;
                    this.loading = true;
                    let request = {};
                    request.cmdType = "GET_SOE_LIST";
                    request.dateStart = this.timeVal[0];
                    request.dateEnd = this.timeVal[1];
                    request.faultType = 'E';
                    request.pageIndex = pageIndex ? pageIndex : this.currentPageSoe;
                    request.pageSize = this.pageSizeSoe;
                    request.qryType = qryType;
                    vueMain = this;
                    $.ajax({
                        url: g_CenterHttpUrl,
                        contentType: 'application/json',
                        data: JSON.stringify(request),
                        async: true,
                        type: "post",
                        dataType: "json",
                        success: function (rsp) {
                            if (rsp["resCode"] == g_ResCodeSuccess) {
                                vueMain.totalSoes = parseInt(rsp["resMsg"]["totals"]);
                                vueMain.tableDataSoe = rsp["resMsg"]["data"];
                            }
                            else {
                                Notiflix.Notify.warning("获取SOE信息列表数据失败：" + rsp["resMsg"]);
                                vueMain.tableDataSoe = [];
                                vueMain.totalSoes = 0;
                            }
                        },
                        error: function (rsp) {
                            vueMain.tableDataSoe = [];
                            vueMain.totalSoes = 0;
                            Notiflix.Notify.failure("获取SOE信息列表数据异常");
                        }
                    });
                },
                getList() {
                    this.loading = true;
                    let request = {};
                    request.cmdType = "GET_FAULT_LIST";
                    request.dateStart = this.timeVal[0];
                    request.dateEnd = this.timeVal[1];
                    request.faultType = 'F';
                    request.pageIndex = this.currentPage;
                    request.pageSize = this.pageSize;
                    vueMain = this;
                    $.ajax({
                        url: g_CenterHttpUrl,
                        contentType: 'application/json',
                        data: JSON.stringify(request),
                        async: true,
                        type: "post",
                        dataType: "json",
                        success: function (rsp) {
                            if (rsp["resCode"] == g_ResCodeSuccess) {
                                vueMain.totals = parseInt(rsp["resMsg"]["totals"]);
                                vueMain.tableData = rsp["resMsg"]["data"];
                            }
                            else {
                                Notiflix.Notify.warning("获取故障信息列表数据失败：" + rsp["resMsg"]);
                                vueMain.tableData = [];
                                vueMain.totals = 0;
                            }
                        },
                        error: function (rsp) {
                            vueMain.tableData = [];
                            vueMain.totals = 0;
                            Notiflix.Notify.failure("获取故障信息列表数据异常");
                        }
                    });
                },
                formatTime(row, column) {
                    let date = row[column.property];
                    if (date) {
                        let dateF = new Date(date);
                        return dateF.Format("yyyy-MM-dd hh:mm:ss")
                    }
                }
            },
            mounted() {
                this.getTimes();
                this.getList();
            }
        }

        // 关闭页面
        window.onunload = function () {
            faultDetailWS.close();

            // 缓存页面GOJS数据
            if ((arrGOJSData != null) && (arrGOJSData.length > 0)) {
                localStorage.setItem("faultGOJS", JSON.stringify(arrGOJSData));
            }
        };
        // ==========================================================
        function getNextDay(d) {
            d = new Date(d);
            d = +d + 1000 * 60 * 60 * 24;
            d = new Date(d);
            return d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
        }

        Date.prototype.Format = function (fmt) { //author: meizz
            let o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (let k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
    </script>
</body>

</html>